{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block head %}
    <style>
        .mouse-hover:hover .mouse-hover-show{
            display: inline-block;
        }
        .mouse-hover:hover .mouse-hover-no-show{
            display: none;
        }
        .mouse-hover-no-show{
            display: inline-block;
        }
        .mouse-hover-show{
            display: none;
        }
    </style>
{% endblock %}
{% block title %}{% translate 'VPN列表' %}{% endblock %}

{% block boby %}
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong><a class="btn btn-primary" href="">{% translate 'VPN用户' %} ({{ count }})</a></strong></span>
                <span class="card-title"><strong><a class="btn btn-outline-primary" href="{% url 'vpn:vpn-login-log' %}">{% translate 'VPN登录日志' %} ({{ vpn_login_log_count }})</a></strong></span>
                <span class="card-title"><strong><a class="btn btn-outline-primary" href="{% url 'vpn:vpn-add' %}">{% translate '创建VPN' %}</a></strong></span>
                <span><strong><a class="btn btn-outline-primary " href="{% url 'vpn:vpn-file-config' %}">{% translate '配置文件' %}</a></strong></span>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <form class="input-group">
                            <input class="form-control" name="search" type="text" value="{{ search }}" placeholder="{% translate '用户名、备注' %}">
                            <button class="btn btn-sm btn-outline-primary" type="submit">{% translate '搜索' %}</button>
                        </form>
                    </div>
                    <div class="col-md-6">
{#                        <span><a class="btn btn-sm btn-outline-success float-right m-2" href="{% url 'vpn:vpn-file-config' %}">{% translate '配置文件' %}</a></span>#}
{#                        <span><a class="btn btn-sm btn-outline-success float-right m-2" href="{% url 'vpn:vpn-file-ca' %}">{% translate 'CA证书' %}</a></span>#}
                    </div>
                </div>
            </div>
            <table class="table table-hover text-center table-vm-list" style="word-wrap:break-word;word-break:break-all;">
                <thead class="thead-light">
                <tr>
{#                    <th></th>#}
                    <th>{% translate '用户名' %}</th>
                    <th>{% translate '密码' %}</th>
                    <th>{% translate '激活状态' %}</th>
                    <th>{% translate '创建时间' %}</th>
                    <th>{% translate '修改时间' %}</th>
                    <th>{% translate '过期时间' %}</th>
                    <th>{% translate '创建人' %}</th>
                    <th>{% translate '备注' %}</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in page %}
                    <tr>
                        <td><a href="{% url 'vpn:vpn-change' id=obj.id %}"><b>{{ obj.username }}</b></a></td>
                        <td class="vpn-password mouse-hover">
                            <span class="mouse-hover-show">{{ obj.password }}</span>
                            <span class="mouse-hover-no-show">******</span>
                        </td>
                        <td>
                            {% if obj.active %}
                                <i class="fa fa-check"></i>
                            {% else %}
                                <i class="fa fa-times"></i>
                            {% endif %}
                        </td>
                        <td>{{ obj.create_time|date:'Y-m-d H:i:s' }}</td>
                        <td>{{ obj.modified_time|date:'Y-m-d H:i:s' }}</td>
                        <td>{{ obj.expired_time|date:'Y-m-d H:i:s' }}</td>
                        <td>{{ obj.create_user}}</td>
                        <td>{{ obj.remarks}}</td>
                    </tr>
                {% endfor %}
            </table>
            {% with page_list=page_nav.page_list previous=page_nav.previous next=page_nav.next %}
                {% if page_list %}
                    <div class="card-footer">
                        <nav aria-label="Page navigation">
                            <ul class="pagination"  style="margin:0;">
                                {% if previous %}
                                    <li class="page-item"><a class="page-link" href="?{{ previous }}" aria-label="Previous"><span
                                            aria-hidden="true">&laquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&laquo;</span></li>
                                {% endif %}
                                {% for disp, query, active in page_list %}
                                    {% if active %}
                                        <li class="page-item active"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if next %}
                                    <li class="page-item"><a class="page-link" href="?{{ next }}" aria-label="Next"><span
                                            aria-hidden="true">&raquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&raquo;</span></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
         window.onload = function() {
            $("#nav_vpn_list").addClass("active");// 激活列表导航栏
         };
    </script>
{% endblock %}
